<template>
	<div class="tmpl">
		<div class="submittitle">
			提交评论
		</div>

		<div class="submitarea">
			<textarea ref='postcontent' class="textarea" placeholder='请输入评论内容'>	</textarea>
			<mt-button size="large" type="primary" @click='postcomment'>发表</mt-button>
		</div>

		<div class="commentlist">
			评论列表
		</div>

		<div class="commentlist">
			<div class="outwrap" v-for='item in comments'>
				<div class="content" v-text='item.content'></div>
				<div class="user" v-text='item.user_name'></div>
				<div class="time">
					{{item.add_time | fmtdate("YYYY-MM--DD HH:mm:ss")}}
				</div>
			</div>
		</div>

		<!-- 加载更多 -->
		<mt-button size="large" type="danger" plain @click='getmore'>加载更多</mt-button>

	</div>


</template>
<style scoped>
	.tmpl{
		padding: 5px;
	}
	.submittitle{
		font-weight: 700;
		font-size: 21px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(92,92,92,0.4);
	}
	.commentlist{
		margin-top: 10px;
		border-top: 1px solid rgba(92,92,92,0.4);
		padding: 20px 0;
	}
	.outwrap {
		border-top: 1px solid rgba(92,92,92,0.4);
		max-height: 300px;
		overflow-y: auto; 
		padding: 5px;
	}
	.content {
		padding: 5px;
	}
	.user, .time{
		width: 50%;
		color: #0094ff;
	}
	.user {
		float: left;

	}
	.time{
		float: right;
	}
</style>

<script>
	import common from '../../kits/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return {
				comments:[], // 用来存放当前数据的评论信息列表
				pageindex:1 // 这是获取评论的页码,默认为第1页
			}
		},
		created(){
			this.getcomment(1);
		},
		methods:{
			// 1.0 提交评论
			postcomment(){
				let url = common.apihost + '/api/postcomment/' + this.artid;
				// 如何去获取到网页上的评论的内容
				// 可以通过console.log(this.$refs.postcontent);
				// 1.0 通过vue来获取textarea的值	
				let contentText = this.$refs.postcontent.value;
				// 判断是否有值
				if(!contentText || contentText.trim().length == 0){
					Toast('评论不能为空');
					return; // 阻断这个方法继续运行代码
				}
				// 2.0 将评论数据提交到服务器
				this.$http.post(url,{content:contentText},{emulateJSON:true}).then(res=>{
					// 利用mint-ui中的Toast来提示用户提交成功
					Toast('评论提交成功');
				},res=>{
					console.log('评论提交失败');
				});
				// 重新加载评论
				this.getcomment(this.pageindex,true);
				this.$refs.postcontent.value = '';
			},
			// 2.0 获取评论
			getcomment(pageindex,isreload){
				let url = common.apihost+'/api/getcomments/'+this.artid+'?pageindex='+pageindex;
				this.$http.get(url).then(res=>{
					// 由于我们需要加载更多功能，所有这里不需要使用新数据覆盖数组，而是键数组追加到comments中
					if(isreload){
						this.comments = res.body.message;
					}else{
						// 这是给加载更多使用的
						this.comments = this.comments.concat(res.body.message);
					}
				},res=>{
					console.log('获取评论数据失败');
				});
			},
			// 3.0 加载更多，获取更多数据
			getmore(){
				// 1.0 将pageindex加一
				this.pageindex++;
				// 2.0 将自增以后的pageindex传入getcomment方法即可获得数据
				this.getcomment(this.pageindex);
			}
		},
		props:['artid']  //用来接收当前评论数据的所属内容的id，这个值可以在vue对象中的如何地方使用
	}
</script>